<template>
	<div>
		<!-- 组合：让动态组件被缓存 -->
		<ul>
			<li @click="init = value" v-for="value in tabBar" :key="value">
				{{ value }}
			</li>
		</ul>
		<keep-alive exclude="C">
			<component :is="init"></component>
		</keep-alive>
	</div>
</template>

<script>
import A from './A'
import B from './B'
import C from './C'
export default {
	components: { A, B, C },
	data() {
		return {
			init: 'B',
			tabBar: [A.name, B.name, C.name],
		}
	},
}
</script>

<style>
</style>